function $(el) {
    return document.querySelector(el)
}
function gets(el) {
    return [...document.querySelectorAll(el)]
}
let formatNum = (num) => num < 10 ? '0' + num : num;

// 渲染数据
let list = $('.list'),
    submit = $('.submit'),
    num = $('.num'),
    timeEle = $('.count-down'),
    answers = ['A','B','C','D'],
    time = 1,
    timer = null,
    dialog = $('.dialog');

function renderDoDom(){
     let html = '',
         numHtml = '';
     datas.forEach((obj,idx) => {
          html += `<div class="list-item">
                        <div class="no">${idx+1}</div>
                        <div class="question-content">
                            <h3>(${obj.score}分)${obj.question}</h3>
                            <ul>`;
        let li = obj.options.map((option,i) => {
                return `<li>
                           <input type="radio" name="${idx}" id="${idx}-${i}" value="${answers[i]}">
                           ${answers[i]}.
                           <label for="${idx}-${i}">${option}</label>
                        </li>`;
            }).join('');
              html += li + `</ul>
                        </div>
                    </div>`;  
            numHtml += '<button data-index="'+ idx +'">' + (idx+1) + '</button>';
    })
    list.innerHTML = html;
    num.innerHTML = numHtml;
}
renderDoDom();

// 倒计时
function showTime(){
    let times = time * 60,
        hours,
        minutes,
        html = '';
    // seconds = 180*60
    timer = setInterval(() => {
        // 将time转换为秒
        times--;
        if(times <= 0){
            // 自动提交
            clearInterval(timer);
            return;
        }
        // 计算小时分和秒
        hours = Math.floor(times / 3600);
        minutes = Math.floor((times % 3600) / 60);
        seconds = times % 60;
        html = formatNum(hours) + ':' + formatNum(minutes) + ':' + seconds;
        timeEle.innerHTML = html;
    },1000);
}
showTime();

// 答过之后，题号高亮显示
list.addEventListener('click',(e) => {
    let target = e.target;
    if(target.nodeName === 'INPUT'){
        let id = target.name,
            btns = num.children;
        btns[id].classList.add('active')
    }
});

// 点击题号，跳转到指定的题目
num.addEventListener('click',(e) => {
    let target = e.target;
    if(target.nodeName === 'BUTTON'){
        let items = list.children,
            index = target.getAttribute('data-index');
        document.documentElement.scrollTop = items[index].offsetTop;
    }
})

// 提交
submit.addEventListener('click',(e) => {
    dialog.style.display = 'block';
    let btn = dialog.querySelector('button'),
        items = [...list.children],
        btns = num.children,
        total = 0,
        count = dialog.querySelector('span'),
        checked,
        val;
    items.forEach((item,idx) => {
        // 获取值
        checked = item.querySelector('input:checked');
        if(checked){
            if(checked.value === datas[idx].result){
                total += datas[idx].score;
                btns[idx].classList.add('active');
            }else{
                btns[idx].classList.remove('active');
                btns[idx].classList.add('red');
            }
        }else{
            btns[idx].classList.remove('active');
            btns[idx].classList.add('red');
        }
        count.innerHTML = total;
    })
    btn.addEventListener('click',() => {
        dialog.style.display = 'none';
        // 将打错了的题的正确答案显示出来
        // 获取num下所有class为red的button
        let errors = [...num.querySelectorAll('button.red')];
        errors.forEach((item,i) => {
            let index = item.getAttribute('data-index');
            let p = document.createElement('p');
            p.style.color = 'green';
            p.innerHTML = '正确答案：' + datas[index].result;
            items[index].appendChild(p);
        })
    })
});
